<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>

    <div id="box">
      <weixinauthor></weixinauthor>
      <weixinuser></weixinuser>
    </div>
   
    <script>

      const bus = new Vue()

      Vue.component(
        "weixinauthor",
        {
          template:`
          <div>
            <input ref="ipContent"></input>
            <button @click="releasePush()">发推送</button>
          </div>
          `,
          methods:{
            releasePush(){
              bus.$emit("newpush",this.$refs.ipContent.value)
            }
          }
        }
      )

      Vue.component(
        "weixinuser",
        {
          template:`<div>{{name}}正在阅读{{blog}}</div>`,
          data(){
            return {
              name:"大妈甲",
              blog:"《来自金星阿姨的旷世雄文》"
            }
          },

          /* 组件被渲染时回调 */
          mounted(){
            bus.$on("newpush",(data)=>{
              this.blog = data
            })
          }
        }
      )

      new Vue({
        el:"#box"
      })

    </script>
</body>
</html>